<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>计算属性</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id='app'>
        单价：<input type="number" v-model="price"><br>
        数量：<input type="number" v-model="count"><br>
        总价：{{ (price * count).toFixed(2) }} <br>
        总价：{{ getTotalPrice().toFixed(2) }} 方法<br>
        总价：{{ totalPrice.toFixed(2) }} 计算属性<br>
        <hr>
        <input type="text" v-model="message"><br>
        <hr>
        身高：<input type="number" v-model="height" step="0.01"><span>m</span><br>
        体重：<input type="number" v-model="weight"><span>kg</span><br>
        BMI: {{ calculateBMI().toFixed(2) }} 方法
        {{ bmiValue.toFixed(2) }} 计算属性<br>
        <div v-if="showBmiMessage">
            {{ getBmiMessage() }}
        </div>
        <div>正常范围：18.5~23.9</div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    price: 5,
                    count: 1,
                    message: 'hello vue',
                    height: 0,
                    weight: 0,
                    showBmiMessage: false
                };
            },
            methods: {
                getTotalPrice() {
                    return this.price * this.count;
                },
                calculateBMI() {
                    if (this.height === 0) return 0;
                    return this.weight / (this.height * this.height);
                },
                getBmiMessage() {
                    if (this.bmiValue < 18.5) {
                        return '您的体脂偏低';
                    } else if (this.bmiValue >= 18.5 && this.bmiValue <= 23.9) {
                        return '您的体脂正常';
                    } else {
                        return '您的体脂偏高';
                    }
                }
            },
            computed: {
                totalPrice() {
                    return this.price * this.count;
                },
                bmiValue() {
                    if (this.height === 0) return 0;
                    return this.weight / (this.height * this.height);
                }
            },
            watch: {
                height() {
                    this.showBmiMessage = true;
                },
                weight() {
                    this.showBmiMessage = true;
                }
            }
        }).mount('#app');
    </script>
</body>

</html>